Amanda Sena's profile

Felines & Canines Redesign

Research and Empathy
Definition
At this point -my group and I decided to focus on adoption and donation flows. Completing both actions took you to a new tab, which is inconvenient to the user and minimizes their trust in the website. This is a key value of our user and thus important for us to resolve.
Ideation
The current website was inspired by the Chicago flag's colors and has at least 6 typefaces. This didn't give it much personality nor did it connect the user to its mission. Our goal was to make the site feel more welcoming and give it a personable feel inspired by what the shelter offers from its small staff through the curved cards, friendly Poppins typeface colors that evoked playfulness, and of course, lots of adorable photos of animals.
Prototyping & Testing
Felines & Canines Site
In addition to the styling choices, the wide margins made the content feel crowded. The homepage also focused as much on their Chicago location as their rescue center in Alabama, leaving me confused as to whether I was on the right website!
The adoption page used an old embed of Petfinder that would take you to another page to view the pet profile. To adopt the pet, you had to email the shelter and wait to hear back (~48 hours) for an appointment.
The donation page had a long list of ways to donate that was not easy to skim and did not give the user a clear view of what their money would go to. To complete the online donation, you were taken to another page where the top navigation changed.
Low Fidelity
Clarity is highly important to our user, along with an identifiable mission they can connect with. My group and I split up prototyping and made different versions of the homepage, 'about us' page and adoption / donation flows, keeping these user values in mind. I focused specifically on prototyping the homepage, 'about us' page and donation flow.

I worked with my group to compare ideas for each page and flow to combine our ideas into one prototype, focusing on building user trust through clarity of messaging, breaking up copy onto cards and building out donation ‘packages’ so user better understood their donation. We also spent some time writing a clearer definition of how the shelter works to provide the transparency that our user values.
For the adoption flow, we had the challenge of balancing the needs of our stakeholder, who had a very small staff, as well as the needs of the user, who wouldn't want to go to another page to look at pet profiles. Through the research of our competitors, I found another site, 'Shelterluv,' that would allow for a more customizable embed into the shelter site for a better user experience and would be easier to update for a staff with resource limitations.

We also designed a survey so users would not need to wait for a response from the shelter to schedule an appointment (and free up the shelter inbox!).

For the donation flow, we focused on laying out the donation copy clearly through a dropdown, cards, and the creation of 'packages,' inspired by the user's desire to know where their funds go.
Mid Fidelity
In addition to warming up the site through our style guide, we also incorporated the learnings from our testing. We each split up testing - I ran tests on both mobile and desktop.

In the adoption flow, we moved the animals available for adoption to the top to meet user mental models. We also clarified they would need to complete a survey to schedule a meeting with an animal. Users enjoyed scrolling through the photos and actually appreciated and felt educated by the survey.

In the donation flow, we added copy to explain our donation 'packages' so users could understand where their funds would go for various donation selections. We also added a progress bar to the donation modal. Users were delighted they could pick a specific purpose for their donation and felt more connected to the cause.
Final Prototypes
Desktop Prototype
Mobile Prototype
For the high fidelity prototype, we cleaned up some additional bugs and further improved the styling of menus and dropdowns to create a more seamless visual experience for our user to maintain their trust.
On a personal note, I really valued this project! Not only did I get to support a cause I am passionate about (as an owner of 3 adopted animals), I was able to work with 3 people who were dedicated to our task. They showed up to meetings with great ideas and feedback, and really pushed the bounds of what was possible within a short timeline. I'm so grateful to have worked with wonderful people on a great topic. 
Felines & Canines Redesign
Published:

Owner

Felines & Canines Redesign

Published: